<template>
  <div id="addLink" class="container">
    <el-button size="small" icon="el-icon-arrow-left" type="primary" class="back" @click="prev">返回</el-button>
    <el-form ref="addForm" :model="addForm" class="form" :rules="formRule" inline label-width="90px">
      <el-row :gutter="28">
        <el-col :span="12">
          <el-form-item label="链接名称" prop="name">
            <el-input v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="链接类型" prop="url_type">
            <el-select v-model="addForm.url_type">
              <el-option label="友情交换" :value="1" />
              <el-option v-if="type == 1" label="链接出售" :value="2" />
              <el-option v-if="type == 2" label="链接购买" :value="3" />
              <el-option v-if="type == 2" label="版权链接" :value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="添加人" prop="add_person">
            <el-input v-model="addForm.add_person" />
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="addForm.sort" />
          </el-form-item>
          <el-form-item label="百度权重">
            <el-input v-model="addForm.baidui_weight" />
          </el-form-item>
          <el-form-item label="链接位置">
            <el-input v-model="addForm.position" />
          </el-form-item>
          <el-form-item label="导出链接">
            <el-input v-model="addForm.export_link" />
          </el-form-item>
          <el-form-item label="检查记录">
            <el-select v-model="addForm.check_log">
              <el-option label="存在" :value="1" />
              <el-option label="不存在" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="PR值">
            <el-input v-model="addForm.pr_value" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="链接地址" prop="url">
            <el-input v-model="addForm.url" />
          </el-form-item>
          <el-form-item label="网站类型" prop="site_type">
            <el-select v-model="addForm.site_type">
              <el-option label="企业站" :value="1" />
              <el-option label="新闻站" :value="2" />
              <el-option label="博客站" :value="3" />
              <el-option label="论坛站" :value="4" />
              <el-option label="门户站" :value="5" />
            </el-select>
          </el-form-item>
          <el-form-item label="打开方式" prop="target">
            <el-select v-model="addForm.target">
              <el-option label="本页面打开" :value="1" />
              <el-option label="新页面打开" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="addForm.contact_person" />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="addForm.mobile" />
          </el-form-item>
          <el-form-item label="添加时间">
            <el-date-picker
              v-model="addForm.add_time"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item label="截止时间">
            <el-date-picker
              v-model="addForm.end_time"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <!-- <el-form-item label="时长">
                    <el-input v-model="addForm.duration"/>
                </el-form-item> -->
          <!-- <el-form-item label="价格">
            <el-input v-model="addForm.price" />
          </el-form-item> -->
          <el-form-item label="交换平台">
            <el-input v-model="addForm.exchange_platform" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label=" ">
        <el-button type="primary" class="save" @click="submit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import linkApi from '@/api/link.js'
export default {
  data() {
    return {
      type: '',
      website_id: '',
      addForm: {
        website_id: this.$route.query.id,
        type: this.$route.query.type,
        name: '',
        url_type: '',
        add_person: '',
        sort: '',
        baidui_weight: '',
        position: '',
        export_link: '',
        check_log: '',
        pr_value: '',
        url: '',
        site_type: '',
        target: '',
        contact_person: '',
        mobile: '',
        add_time: '',
        end_time: '',
        exchange_platform: ''
      },
      formRule: {
        name: [
          { required: true, message: '请输入链接名', trigger: 'blur' }
        ],
        url_type: [
          { required: true, message: '请选择链接类型', trigger: 'change' }
        ],
        site_type: [
          { required: true, message: '请选择网站类型', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入链接地址', trigger: 'blur' }
        ],
        add_person: [
          { required: true, message: '请输入添加人', trigger: 'blur' }
        ]
      },
      linkData: []
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.website_id = val
      if (value) {
        this.$router.push({ name: 'friendLink' })
      }
    }
  },
  created() {
    this.type = this.$route.query.type
    this.website_id = this.$route.query.siteId
    this.addForm.id = this.$route.query.id
    this.getInfo()
  },
  methods: {
    getInfo() {
      const val = {
        id: this.addForm.id,
        website_id: this.website_id,
        type: this.type
      }
      linkApi.linkInfo(val).then(res => {
        if (res.code == 0) {
          this.addForm = {
            id: this.$route.query.id,
            website_id: this.$route.query.siteId,
            type: this.$route.query.type,
            name: res.data.name,
            url_type: res.data.url_type,
            add_person: res.data.add_person,
            sort: res.data.sort,
            baidui_weight: res.data.baidui_weight,
            position: res.data.position,
            export_link: res.data.export_link,
            check_log: res.data.check_log,
            pr_value: res.data.pr_value,
            url: res.data.url,
            site_type: res.data.site_type,
            target: res.data.target,
            contact_person: res.data.contact_person,
            mobile: res.data.mobile,
            add_time: res.data.add_time,
            end_time: res.data.end_time,
            exchange_platform: res.data.exchange_platform
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //   保存
    submit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          linkApi.linkUpdate({ ...this.addForm }).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.$router.push({ name: 'friendLink', query: { type: this.type }})
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    },
    prev() {
      const type = this.$route.query.type
      this.$router.push({ name: 'friendLink', query: { type: type }})
      // this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
#addLink.container{
    margin-bottom: 0px;
  }
#addLink{
    .el-form{
        width: 100%;
    }
    .el-form--inline .el-form-item{
        width: 100%;
    }
    .el-form--inline .el-form-item__content{
            width: calc(100% - 90px);
            .el-select{
                width: 100%;
            }
            .el-date-editor.el-input, .el-date-editor.el-input__inner{
                width: 100%;
            }
        }
}
</style>
<style scoped lang='scss'>
.back{
    z-index: 99;
    top: 14px;
    right: 18px;
}
.form{
    margin-top: 40px;
}
</style>
